<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Input From UI Design</title>
    <link rel="stylesheet" href="static/css/style_login.css">

    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/style.css">
    <%--    <link rel="stylesheet" href="css/verify.css">--%>
    <link rel="stylesheet" type="text/css" href="static/css/htmleaf-demo.css">
    <link rel="stylesheet" type="text/css" href="static/css/verify.css">

</head>
<body>
<%
    String errorMsg = (String)request.getAttribute("errorMsg");
    if(errorMsg==null){
        errorMsg="";
    }
%>
<div class="box">
    <h2>Login</h2>
    <form action="UserServlet" method="post">
        <div class="inputBox">
            <input type="text" name="username" required="" maxlength="10">
            <label>用户名</label>
        </div>
        <div class="inputBox">
            <input type="password" name="password" required="" maxlength="10">
            <label>密码</label>
        </div>

        <div class="row" style="color: #FFFFFF">
            <div class="col-md-offset-4 col-md-4">
                <div id="mpanel1" ></div>
            </div>
        </div>
        <br>

        <input type="submit" style="margin-left: 38%" id="bt1" disabled="disabled" value="登录">

    </form>
    <div style="margin-top: 20px;text-align: center">
        <span class="errorMsg" style="color: #FFFFFF"><%=errorMsg %></span>
    </div>
</div>

<script type="text/javascript" src="static/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="static/js/verify.min.js"></script>
<script type="text/javascript">

    $('#mpanel1').slideVerify({
        type : 1,		//类型
        vOffset : 5,	//误差量，根据需求自行调整
        barSize : {
            width : '300px',
            height : '40px',
        },
        ready : function() {
        },
        success : function() {
            alert('验证成功，允许登录');
            document.getElementById("bt1").disabled=false
        },
        error : function() {
        }

    });

</script>
</body>
</html>